<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        *{margin:0;padding:0;text-align: center;font-family: 等线;color:#fff;}
        body{background:radial-gradient(at 0 0,#fff 1%,#88C2FF 55%);}
        header{font-size: 25px;margin-top: 10px;}
        h1{font-size: 80px;margin-top:60px;padding-left: 70px;font-family:方正兰亭超细黑简体;}
        table{margin-top:250px;font-size: 15px;}
        p{margin-top: 10px;}
        table img{vertical-align: middle;}
    </style>
   <!-- 引入插件CSS-->
    <link rel="stylesheet" href="weather.css" />
                 <!--在百度获取天气信息-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=AvqyEGPoX9capmNtHki8URpB"></script>
    <title>天气预报</title>
</head>
<body ng-app="weatherApp" ng-controller="weatherCtrl">
	<!--页面显示当前城市-->
    <header>{{city}}</header> 
    <section>
        <h1>{{t}}</h1>
        <div>
            {{w}} | {{d}}
        </div>
        <p>PM2.5指数:{{pm}}</p>
    </section>
    <div class="{{weather}}"></div> 
    <!--sunny,cloudy,rainy,snowy,rainbow,starry,stormy-->
    <table width="100%" cellspacing="12" >
        <tr class="clothes"><td colspan="3" >{{clothes}}</td></tr>
        <tr ng-repeat="w in weather_data">
            <td width="20%" style="text-align:left;"> {{w.date}}</td>
            <td width="55%"><img ng-src="{{w.dayPictureUrl}}">&nbsp;&nbsp;&nbsp;<img ng-src="{{w.nightPictureUrl}}"></td>
            <td width="25%" style="text-align:right;">{{w.temperature}}</td>
        </tr>
    </table>
</body>
<script src="jquery.min.js"></script>
<script src="angular1.5.8.js"></script>
<script type="text/javascript">
    var list={
        "暴雨":{w:"stormy",bg:"rgba(0,0,0,0.5) 1%,rgba(0,0,0,0.6) 55%"},
        "多云":{w:"cloudy",bg:"grey 2%,#ccc 90%"},
        "小雨":{w:"rainy",bg:"#ccc 30%,#eee 70%,#ccc"},
        "中雨":{w:"rainy",bg:"#ccc 30%,#eee 70%,#ccc"},
        "大雨":{w:"rainy",bg:"#ccc 30%,#eee 70%,#ccc"},
        "小雪":{w:"snowy",bg:"#eee 9%,#ccc 55%"},
        "晴":[
            {w:"sunny",bg:"#fff 1%,#88C2FF 55%"},
            {w:"starry",bg:"black 5%,grey 55%,black 80%"},
            {w:"rainbow",bg:"#fff 1%,#88C2FF 55%"}
        ]
    };
    angular.module("weatherApp",[]).controller("weatherCtrl",function($scope,$http){
        new BMap.LocalCity().get(function (result) {
            var url='http://api.map.baidu.com/telematics/v3/weather?callback=JSON_CALLBACK&location='+result.name+"&output=json&ak=AvqyEGPoX9capmNtHki8URpB";
            $http.jsonp(url).success(function(data){
                var result=data.results[0];
                console.log(result);
                //获取当前城市
                $scope.city=result.currentCity;
                //
                $scope.clothes=result.index[0].des;
                $scope.ultraviolet=result.index[4].des;
                var w=result.weather_data[0].date.split("：")[1];
                $scope.w=result.weather_data[0].weather;
                $scope.d=result.weather_data[0].wind;
                $scope.pm=result.pm25;
                var str=$scope.w.split("转")[0];
                var index=new Date().getHours()>18?1:0;
                if(str=="晴"){
                    $scope.weather=list[str][index].w;
                    angular.element("body").css({
                        background:"radial-gradient(at 0 0,"+list[str][index].bg+")"
                     })
                }else{
                    $scope.weather=list[str].w;    
                    angular.element("body").css({
                        background:"radial-gradient(at 0 0,"+list[str].bg+")"
                     }) 
                }
                $scope.t=parseInt(w.substring(0,w.length-1))+"°";
                result.weather_data.shift();
                $scope.weather_data=result.weather_data;
            });
        }); 
    })
</script>
</html>
